<template>
  <div id="appeal">
    <!-- <van-nav-bar class="header"
                 @click-left="goback"
                 :border="false">
      <div class="left"
           slot="left">
        <van-icon name="arrow-left"
                  size="24px"
                  color="#fff" />
      </div>
      <div class="title"
           slot="title">申诉</div>
    </van-nav-bar> -->
    <div class="header">
      <div class="left"
           @click="goback"><img src="@/assets/img/public/leftarrow.png"
             alt=""></div>
      <div class="title">申诉</div>
      <!-- <div class="right"
           @click="confirmEdit">完成</div> -->
    </div>
    <div class="main">
      <div class="card bgwrite">
        <div class="title wordsGray">申诉订单</div>
        <div class="infos flex">
          <div class="headimg">
            <img src="@/assets/img/performance/orderCenter/groupHead.png"
                 width="100%"
                 alt="">
          </div>
          <div class="right">
            <div class="fz2">{{orderName}}</div>
            <div class="wordsGray fz5">
              <span>订单编号：</span>
              <span>{{orderCode}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="card  bgwrite">
        <div class="title wordsGray">
          <div class="left">图片凭证 (选填)</div>
          <div class="right">{{imgList.length}}/9</div>
        </div>
        <div class="list flex">
          <div class="voucher"
               @click="show_preview(index)"
               v-if="imgList.length>0"
               v-for="(item,index) in imgList"
               :key="index">
            <img :src="item"
                 width="100%"
                 alt="">
          </div>
        </div>
        <div class="uploadpic"
             @touchstart="uploadImage"
             v-if="imgList.length<9">
          <img src="@/assets/img/public/addImg.png"
               width="100%"
               height="100%"
               alt="">

        </div>
      </div>
      <div class="card bgwrite">
        <div class="title wordsGray">
          <div class="left">申诉内容 (选填)</div>
          <div class="right">{{txtnum}}/200</div>
        </div>
        <textarea rows="4"
                  @click="inputfocus"
                  ref="cinput"
                  v-model="content"
                  placeholder="详细内容..."
                  class="content fz4"></textarea>
      </div>
      <div class="btn bgprimary wordsWrite fz5"
           @click="submit">提交</div>
    </div>
    <van-image-preview v-model="showPreview"
                       :images="imgList"
                       :startPosition="index"
                       @change="onChange">
    </van-image-preview>
  </div>
</template>
<script>
import apiConfig from "@/api/index";
import { getuserUid } from "@/utils/auth";
export default {
  data() {
    return {
      txtnum: 0,
      imgList: [],
      content: "",
      orderName: this.$route.params.orderName,
      orderCode: this.$route.params.orderCode,
      orderUid: this.$route.params.orderUid,
      complaintUid: this.$route.params.complaintUid,
      showPreview: false,
      index: 0
    };
  },
  watch: {
    content() {
      (this.content.length <= 200 && (this.txtnum = this.content.length)) ||
        ((this.txtnum = 200), (this.content = this.content.slice(0, 200)));
    }
  },
  methods: {
    inputfocus() {
      this.$refs.cinput.focus();
    },
    show_preview(index) {
      this.showPreview = true;
      this.index = index;
    },
    onChange(index) {
      this.index = index;
    },
    goback() {
      this.$router.push({
        name: "performance-complaintDetail",
        params: { uid: this.orderUid, orderName: this.orderName }
      });
    },
    //打开相册
    uploadImage() {
      const _this = this;
      window.plus.gallery.pick(
        path => {
          if (path) {
            _this.imgList.push(path);
          }
        },
        {
          filter: "image"
        }
      );
    },
    //申诉
    submit() {
      if (this.imgList.length > 0) {
        this.$toast.loading({
          duration: 0,
          mask: true,
          message: "加载中..."
        });
        //提交
        var task = window.plus.uploader.createUpload(
          `${apiConfig.config.baseURL}orderList/insertAppeal`,
          {
            method: "POST",
            headers: {
              "Content-Type": "multipart/form-data"
            }
          },
          (data, status) => {
            // console.log(data);
            var res = new Function("return " + data.responseText)();
            //上传完成
            if (res.code == 200) {
              this.$toast.clear();
              this.$router.push("/performance/orderCenter");
            } else {
              this.$toast(res.msg);
              this.$toast.clear();
            }
          }
        );
        task.setRequestHeader("token", getToken());
        //单图上传
        //task.addFile(this.images[0], { key: 'multipartFiles' });
        //多图上传
        for (var i = 0; i < this.imgList.length; i++) {
          task.addFile(this.imgList[i], { key: "multipartFiles" + i });
        }
        task.addData("userUid", getuserUid()); //用户id
        task.addData("orderUid", this.orderUid); //订单id
        task.addData("complaintUid", this.complaintUid); //投诉id
        task.addData("reason", this.content); //内容
        // task.addData("severeStatus",this.value_reason);  //投诉级别（传id）
        // task.addData("orderUid",this.value_order);  //投诉订单
        task.start(); //开始上传
      } else {
        this.$toast.loading({
          mask: true,
          message: "加载中..."
        });
        HTTP("insertAppeal", {
          multipartFiles: "",
          userUid: getuserUid(),
          orderUid: this.orderUid,
          complaintUid: this.complaintUid,
          reason: this.content
        }).then(res => {
          if (res.code == 200) {
            this.$toast.clear();
            this.$toast("申诉成功，请等待处理结果!");
            setTimeout(() => {
              this.$router.push("/performance/orderCenter");
            }, 1000);
          } else {
            this.$toast(res.msg);
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#appeal {
  overflow: hidden;
  .header {
    z-index: 200;
    background: #5e8efe;
    color: #ffffff;
    height: 0.92rem;
    line-height: 0.92rem;
    box-sizing: border-box;
    padding: 0 3%;
    display: flex;
    div {
      display: inline-block;
      vertical-align: top;
    }
    .left {
      width: auto;
      margin-top: 0.15rem;
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
    }
    .title {
      color: #ffffff;
      font-size: 0.35rem;
      text-align: center;
      flex: 1;
    }
    .right {
      font-size: 0.32rem;
      height: 0.92rem;
      line-height: 0.92rem;
      width: auto;
    }
  }
  .main {
    height: calc(100vh - 0.92rem);
    overflow-y: scroll;
    touch-action: auto;
    box-sizing: border-box;
    // margin-top: 0.92rem;
    padding: 0.2rem 0.24rem 0 0.24rem;
    .card {
      border-radius: 10px;
      margin-bottom: 0.24rem;
      .title {
        height: 0.64rem;
        line-height: 0.64rem;
        padding-left: 0.24rem;
        border-bottom: 1px solid #e5e5e5;
        position: relative;
        .right {
          position: absolute;
          right: 0.24rem;
          top: 0.05rem;
        }
      }
      .infos {
        padding: 0.36rem 0.24rem;
        align-items: center;
        .headimg {
          width: 0.9rem;
          height: 0.9rem;
          overflow: hidden;
          border-radius: 90%;
          margin-right: 0.24rem;
        }
      }
      .list {
        padding: 0.24rem 0.24rem 0 0.24rem;
        flex-wrap: wrap;
        .voucher {
          width: 1.68rem;
          margin-right: 0.24rem;
          margin-bottom: 0.24rem;
        }
      }
      .uploadpic {
        margin-left: 0.24rem;
        padding-bottom: 0.24rem;
        width: 1.68rem;
        height: 1.68rem;
      }
      .content {
        width: calc(100% - 0.48rem);
        padding: 0.24rem;
        border: none;
      }
    }
    .btn {
      height: 0.88rem;
      line-height: 0.88rem;
      border-radius: 10px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 0.4rem;
    }
  }
}
</style>
